import React from "react";
import { useParams, useSearchParams, useLocation } from "react-router-dom";

export default function Detail() {
  // param传参
  // const { id, title, content } = useParams();

  // search传参
  // const [search, setSearch] = useSearchParams();
  // const id = search.get("id");
  // const title = search.get("title");
  // const content = search.get("content");

  // state传参
  const {
    state: { id, title, content },
  } = useLocation();
  return (
    <div>
      <ul>
        {/* <li>
          <button onClick={() => setSearch("id=9&title=zoe&content=xx")}>
            点我更新search参数
          </button>
        </li> */}
        <li>{id}</li>
        <li>{title}</li>
        <li>{content}</li>
      </ul>
    </div>
  );
}
